<template>
	<div ref='blogRef' class='blog'>
		<div class='header' ref='headerRef' :style="$route.path.indexOf('index') > 0 ? 'background: transparent' : ''">
			<div class='header-box'>
				<div class='brand'>
					<div class='' @click='$router.push("/")'></div>
					<div class='blog-name word-cannot-selected' @click='$router.push("/")'>SO博客</div>
				</div>
				<div class='menu'>
					<div class='menu-item' v-for='(item,key_index) in menus' :key='key_index' @click='menuItemClicked(item)' :class='item.actived ? "active" : ""'>{{item.name}}
					</div>
				</div>
			</div>
		</div>
		<div id="content-box-id" class='content-box' :style="$route.path.indexOf('index') < 0 ? 'padding-top: 60px' : ''">
			<div style="min-height: 100%">
				<router-view></router-view>
			</div>
			<div class='footer'>
				<div class='footer-box'>
					<div class='brand word-cannot-selected'>
						<div class='logo' @click='$router.push("/")'></div>
						<div class='blog-name word-cannot-selected' @click='$router.push("/")'>Sleepy Ocean</div>
						<div class='note word-cannot-selected'>沉睡的海洋 2019. © All Rights Reserved.</div>
						<div class="share-box">
							<a class="icon github" href="https://github.com/sleepyocean"></a>
							<div class="icon wechat"></div>
							<div class="icon mail"></div>
						</div>
					</div>
					<div class="link-box word-cannot-selected">
						<div class="link-title">
							友链
						</div>
						<div class="link-item">
							<span @click="linkTo('login')">登陆页面</span>
						</div>
						<div class="link-item">
							<span  @click="linkTo('sys/project')">项目管理</span>
						</div>
						<div class="link-item">
							<span  @click="linkTo('404')">404页面</span>
						</div>
					</div>
				</div>
			</div>
		</div>
		<el-backtop target=".content-box" :visibility-height="40" @click="backToTop"></el-backtop>
	</div>
</template>

<script>
export default {
	name: 'Blog',
	components: {},
	data () {
		return {
			menus: [
				{
					id: 'SY',
					name: '首页',
					page: 'index',
					actived: false
				},
				{
					id: 'QW',
					name: '实验室',
					page: 'fun',
					actived: false
				},
				{
					id: 'GY',
					name: '关于',
					page: 'about',
					actived: false
				}
			]
		};
	},
	mounted () {
		let self = this;
		this.menus.forEach(el => {
			if (self.$route.path.indexOf(el.page) > -1) {
				el.actived = true;
			} else {
				el.actived = false;
			}
		});
		var scrollDiv = this.$refs['blogRef'];
		var headerDiv = this.$refs['headerRef'];

		scrollDiv.onmousewheel = function (event) {
			if ((event.wheelDelta || event.detail) > 0) {
				headerDiv.className = 'header header-bg';
			} else {
				headerDiv.className = 'header-hidden header';
			}
			return true;
		};
	},
	watch: {
		$route (to, from) {
			this.menus.forEach(el => {
				if (to.path.indexOf(el.page) > -1) {
					el.actived = true;
				} else {
					el.actived = false;
				}
			});
		}
	},
	methods: {
		menuItemClicked (item) {
			this.$router.push('/' + item.page);
		},
		backToTop () {
			this.$refs['headerRef'].className = 'header';
		},
		linkTo (urlLink) {
			this.$router.push('/' + urlLink);
		}
	}
};
</script>

<style lang="scss" scoped>
	.blog {
		font-size: 18px;
		background: white;
		overflow: hidden;

		.header {
			width: 100%;
			height: 60px;
			position: absolute;
			transition: all .4s ease;
			z-index: 10;
			color: #b4bdce;
			background: #2d4e7b;

			&.header-bg {
				background: #2d4e7b;
			}

			&.header-hidden {
				margin-top: -60px;
			}

			.header-box {
				display: flex;
				align-items: center;
				height: 100%;
				background: transparent;
				overflow: hidden;
				justify-content: space-around;

				.brand {
					height: 100%;
					padding-left: 10px;

					.logo {
						cursor: pointer;
						display: block;
						float: left;
						height: 100%;
						width: 60px;
						background-size: 60px;
						background-image: url('../../assets/img/svg/whale.svg');
						background-position: center;
						background-repeat: no-repeat;
					}

					.blog-name {
						cursor: pointer;
						display: block;
						float: left;
						height: 100%;
						line-height: 60px;
						font-size: 28px;
						letter-spacing: 5px;
					}
				}

				.menu {
					height: 100%;

					.menu-item {
						cursor: pointer;
						line-height: 60px;
						display: inline-block;
						padding: 0 40px;
						user-select: none;
						font-size: 20px;

						&.active {
							font-weight: bold;
							color: white;
						}

						&:hover {
							background: #244067;
						}
					}
				}
			}
		}

		.content-box {
			width: 100%;
			height: 100%;
			overflow: auto;

		}

		.footer {
			width: 100%;
			height: 200px;
			margin-top: 20px;
			background: #254558;
			color: white;

			.footer-box {
				display: flex;
				align-items: center;
				height: 100%;
				background: transparent;
				overflow: hidden;
				justify-content: space-around;

				.brand, .link-box, .share-box {
					float: left;
				}

				.brand {
					float: left;
					width: 300px;
					padding-left: 10px;

					.logo {
						height: 100px;
						width: 100px;
						float: left;
						background-size: 100px;
						background-image: url('../../assets/img/svg/whale.svg');
						background-position: center;
						background-repeat: no-repeat;
					}

					.blog-name {
						height: 20px;
						width: 300px;
						float: left;
						font-weight: bold;
						font-size: 16px;
						text-align: left;
						color: #9adcff;
					}

					.note {
						display: inline-block;
						height: 20px;
						font-size: 12px;
						color: #55eef0;
						font-family: sans-serif;
						text-align: left;
						float: left;
					}
					.share-box {
						width: 200px;
						height: 40px;
						display: flex;
						align-items: center;
						justify-content: left;

						.icon {
							cursor: pointer;
							height: 24px;
							width: 24px;
							margin: 10px;
							background-size: 24px;
							background-position: center;
							background-repeat: no-repeat;
							transition: all .4s ease;

							&:hover {
								animation-name: jello;
								transform-origin: center bottom;
								animation-duration: 1s;
								animation-iteration-count: infinite;
							}
						}

						.github {
							background-image: url('../../assets/img/svg/github.svg');
						}
						.wechat {
							background-image: url('../../assets/img/svg/social-wechat.svg');
						}
						.mail {
							background-image: url('../../assets/img/svg/social-mail.svg');
						}
					}
				}
				.link-box {
					height: 100%;
					text-align: center;
					padding: 20px 10px;

					.link-title {
						font-size: 20px;
						font-weight: bold;
						padding-bottom: 10px;
						letter-spacing: 4px;
						color: #f8f8ff;
					}
					.link-item {
						font-size: 14px;
						padding: 5px;
						color: gainsboro;
						display: inline-block;
						span {
							cursor: pointer;
							&:hover {
								color: #9adcff;
								border-bottom: 1px solid #9adcff;
							}
						}
					}
				}
			}
		}
	}
</style>
